<template>
    <div class="son3">
        <h3>SonDemo3</h3>
        <h3>选项式API(配置)的 props</h3>

        <div>
            <h3 @click="editTitle">click---{{ tle }}</h3>
            <p>des: {{ des }}</p>
            <p>user.name : {{ user.name }}</p>
            <p>user.sex : {{ user.sex }}</p>
        </div>
        <div v-show="isShow" class="isShowHide">显示和隐藏</div>
    </div>
</template>

<script>
export default {

    props: {
        title: {
            type: String,
            required: true
        },
        des: {
            type: [String, Number],
            default: 'des默认值'
        },
        dao: {
            type: Object,
            default() {
                return {
                    name: '青龙偃月刀'
                }
            }
        },
        user: {
            type: Object,
            default(rawProps) { // 除自己之外且在自己之前的 Props 的属性值
                return {
                    name: '志超' + '--' + rawProps.title,
                    sex: 1
                }
            }
        },
        des3: {
            type: [String, Number],
            default: 'des2默认值'
        },
        // 函数类型的默认值
        propH: {
            type: Function,
            default() {
                console.log('子组件函数类型的默认值被调用');

                return '函数的默认值'
            }
        },
    },

    // 数据
    data() {
        // 在data 函数中return 回去的对象里的属性都是响应式变量
        return {
            // 把 props 传过来的值，当作子组件的初始值来用
            tle: this.title,
            sonTitle: '我是sonTitle子组件定义的标题 ',
            isShow: false
        }
    },
    // 方法
    methods: {
        editTitle() {
            this.tle = '可以修改被props的值初始化后的状态变量'
            // 点击时调用 propH 函数，传入两个参数,(一个参数为普通变量，一个参数为方法函数)
            this.propH(this.sonTitle, this.showHandler)
            // console.log('这是一个父组件的函数，他被传入了子组件。', this.sonTitle);
            // this.showHandler()
        },
        showHandler() {
            this.isShow = !this.isShow
        },

    }
}
</script>

<style lang="scss" scoped>
.son3 {
    margin: 10px;
    padding: 10px;
    border: 3px solid skyblue;
}

.isShowHide {
    height: 100px;
    width: 100px;
    background-color: cyan;
}
</style>